<template>
  <div class="all-categories">
    <div class="all-categories-title">ALL CATEGORIES</div>
    <div class="all-categories-container">
      <div class="categories-wrap" v-for="(item,index) in TreeShapeCategories" :key="index" v-show="!ProductLoading">
        <div class="categories-item" >
            <img :src="CategorieImgUrl + item.imgUrl" class="categorie-img" @click="selectItem(item,index)"/>
            <div class="categorie-content-box">
              <div class="categorie-ClassA" @click="selectItem(item,index)">
                <span class="categorie-ClassA-title">{{item.name}}</span>
                <span class="categorie-ClassA-num">{{item.productCount}}</span>
              </div>
              <ul class="categorie-ClassB">
                <li class="categorie-ClassB-item" v-for="(itemSecond,indexSecond) in item.children" :key="indexSecond" @click="selectItemSecond(itemSecond,indexSecond,item)">
                  <span class="ClassB-item-title">{{itemSecond.name}}</span>
                  <span class="ClassB-item-num">{{itemSecond.productCount}}</span>
                </li>
              </ul>
          </div>
      </div>
    </div>
    </div>
    <LoadOverlay v-show="ProductLoading"></LoadOverlay>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations, mapGetters} from 'vuex'
  import LoadOverlay from 'base/load-overlay/load-overlay'
  export default {
    data() {
      return {
        CategorieImgUrl: CategorieImgUrl,
        ProductLoading:true,  //分类渲染loading
        OneCategories:[],  //一级分类数据
        TreeShapeCategories: []
      }
    },
    created() {
      const _this = this
      let t1 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t1);
          this.ProductLoading = false;
        }
      }, 100)
    },
    methods: {
      selectItem(item, index) {
        let nameAry = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}`
        })
        this.setCategoryIndex(index)
        this.setFocus(1)
        this.setCategories(item)
        this.setCategoryName(item.name)
      },
      selectItemSecond(itemSecond,indexSecond,item) {
        let nameAry1 = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry1.join('-')
        let nameAry2 = itemSecond.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let SecondName = nameAry2.join('-')
        this.$router.push({
          path: `/categories/${name}/${SecondName}`
        })
        this.setCategoryIndex(indexSecond)
        this.setFocus(2)
        this.setCategories(itemSecond)
        this.setSelectSecondCategory(itemSecond)
        this.setCategoryName(itemSecond.name)
        for (let i =0 ;i<this.TreeShapeCategories.length; i++) {
          this.OneCategories = []
          if( this.TreeShapeCategories[i].categoryId === itemSecond.parentId) {
            this.OneCategories.push(this.TreeShapeCategories[i])
            break
          }
        }
        this.setSelectOneCategory(this.OneCategories[0])
      },
      ...mapMutations({
        setCategoryName: 'SET_CATEGORY_NAME',
        setCategoryIndex: 'SET_CATEGORY_INDEX',
        setFocus: 'SET_CATEGORY_FOCUS',
        setSelectSecondCategory: 'SET_SELECT_SECOND_CATEGORY',
        setSelectOneCategory: 'SET_SELECT_ONE_CATEGORY',
        setCategories: 'SET_CATEGORIES',
        setClass: 'SET_CATEGORIES'
      })
    },
    computed:{
    },
    components:{
      LoadOverlay
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .load-overlay
    top: 134px !important
  .MR45
    margin-right 45px
  .all-categories
    text-align: left;
    max-width 1067px
    .all-categories-title
      font-size: 16px;
      font-family: "Amazon Ember",Arial,sans-serif;
      margin: 25px 0 25px;
      text-align center
    .all-categories-container
      margin-bottom 75px
      justify-content space-between
      column-count: 3;
      .categories-wrap
        width 95%
        padding 10px 12px
        font-family:"Amazon Ember",Arial,sans-serif;
        margin-bottom: 40px
        background #ECECEC
        break-inside: avoid; box-sizing: border-box;
        .categories-item
          .categorie-img
            cursor:pointer
          .categorie-content-box
            margin-top 20px
            .categorie-ClassA
              color:#444
              line-height:16px;
              cursor:pointer
              display flex
              .categorie-ClassA-title
                font-size:18px;
                flex 6
              .categorie-ClassA-num
                flex 1
                font-size 13px
                text-align right
              .categorie-ClassA-title:hover
                color: #0185c6
            .categorie-ClassB
              margin-top 12px
              color: #333
              cursor:pointer
              .categorie-ClassB-item
                display flex
                margin-bottom 12px
                .ClassB-item-title
                  font-size:14px;
                  flex 6
                .ClassB-item-num
                  flex 1
                  font-size 13px
                  text-align right
                .ClassB-item-title:hover
                  color: #0185c6

</style>
